<template>
  <view class="container">
    <view class="header">
      <view class="options">
        <view class="option inactive" @click="toggleOption('low')" :style="getOptionStyle('low')">低效:{{ lowCount }}台</view>
        <view class="option inactive" @click="toggleOption('down')" :style="getOptionStyle('down')">停机:{{ downCount }}台</view>
        <view class="option inactive" @click="toggleOption('offline')" :style="getOptionStyle('offline')">离线:{{ offlineCount }}台</view>
        <view class="option active" @click="toggleOption('all')">全部</view>
      </view>
    </view>
    
    <view class="devices">
      <view class="device" v-for="(device, index) in filteredDevices" :key="index" @click="dataManagement">
        <view class="device-status" :style="{ backgroundColor: getStatusColor(device.status) }">#{{ device.id }}</view>
        <view class="device-type" :style="{ backgroundColor: getTypeColor(device.type) }">{{ device.type }}</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      selectedOption: 'all',
      devices: [
        { id: 1, status: 'low', type: 'C12-DJSOA' },
        { id: 2, status: 'low', type: 'C12-DJSOA' },
        { id: 3, status: 'low', type: 'C12-DJSOA' },
        { id: 4, status: 'low', type: 'C12-DJSOA' },
        { id: 5, status: 'low', type: 'C12-DJSOA' },
        { id: 6, status: 'down', type: 'C12-DJSOA' },
        { id: 7, status: 'down', type: 'C8-DJSOA' },
        { id: 8, status: 'down', type: 'C8-DJSOA' },
        { id: 9, status: 'down', type: 'C8-DJSOA' },
        { id: 10, status: 'high', type: 'C8-DJSOA' },
        { id: 11, status: 'high', type: 'C8-DJSOA' },
        { id: 12, status: 'high', type: 'C8-DJSOA' },
        { id: 13, status: 'high', type: 'C8-DJSOA' },
        { id: 14, status: 'high', type: 'C8-DJSOA' },
        { id: 15, status: 'offline', type: 'C12-DJSOA' },
        { id: 16, status: 'offline', type: 'C8-DJSOA' },
        { id: 17, status: 'offline', type: 'C8-DJSOA' },
        { id: 18, status: 'offline', type: 'C8-DJSOA' },
      ],
      lowCount: 5,
      downCount: 5,
      offlineCount: 4,
    };
  },
  computed: {
    filteredDevices() {
      if (this.selectedOption === 'all') {
        return this.devices;
      }
      return this.devices.filter(device => device.status === this.selectedOption);
    },
  },
  methods: {
    toggleOption(option) {
      this.selectedOption = option;
    },
    getStatusColor(status) {
      switch (status) {
        case 'low':
          return '#e4b94f'; // 低效黄色
        case 'down':
          return '#f26c6d'; // 停机红色
        case 'high':
          return '#3eb273'; // 高效绿色
        case 'offline':
          return '#DCDCDC';
        default:
          return '#FFFFFF'; // 白色
      }
    },
    getTypeColor(type) {
      switch (type) {
        case 'C12-DJSOA':
          return '#841893'; // 低效黄色
        case 'C8-DJSOA':
          return '#113555'; // 停机红色
        default:
          return '#FFFFFF'; // 白色
      }
    },
    getOptionStyle(option) {
      const colors = this.deviceNumColor(option);
      return {
        backgroundColor: colors.backgroundColor,
        borderColor: colors.borderColor,
        borderWidth: '4rpx',
        borderStyle: 'solid',
      };
    },
    deviceNumColor(option) {
      switch (option) {
        case 'low':
          return { backgroundColor: '#f1e3c1', borderColor: '#d1b381' }; // 低效黄色
        case 'down':
          return { backgroundColor: '#e1a8ab', borderColor: '#c1888b' }; // 停机红色
        case 'offline':
          return { backgroundColor: '#dedede', borderColor: '#c1c1c1' }; // 离线灰色
        default:
          return { backgroundColor: '#FFFFFF', borderColor: '#FFFFFF' }; // 白色
      }
    },
	dataManagement(){
		uni.navigateTo({
			url:'/pages/deviceData/index'
		})
	}
  }
};
</script>
<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header {
  padding: 20rpx;
  background-color: #F5F5F5;
}

.title {
  font-size: 20rpx;
  font-weight: bold;
}

.options {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.option {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20rpx;
  cursor: pointer;
  width: 150rpx;
  height: 40rpx;
  font-size: 24rpx;
}

.inactive {
  background-color: #EAEAEA;
  color: #000;
}

.active {
  background-color: #3079BD;
  color: #FFF;
  border: #3079BD solid 4rpx;
}

.devices {
  flex: 1;
  overflow-y: auto;
  padding: 25rpx;
  background-color: #ffffff;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250rpx, 1fr)); /* 每行显示两个设备项 */
  gap: 10rpx; /* 设备项之间的间距 */
  margin: 0 0 5rpx 5rpx;
}

.device {
  display: flex;
  align-items: center;
  margin: 10rpx 0 10rpx 10rpx;
}

.device-status {
  width: 100rpx;
  height: 100%;
  border-radius: 15rpx 0 0 15rpx;
  font-size: 30rpx;
  text-align: center;
  font-weight: bold;
  color: #FFFFFF;
}

.device-type {
  flex: 1;
  height: 100%;
  border-radius: 0 15rpx 15rpx 0;
  text-align: center;
  font-size: 30rpx;
  color: #FFFFFF;
}
</style>